<script lang="ts" setup>
	import { ref } from "vue";
	import {
		onShow,
		onHide,
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';

	import * as im from '@/common/im.js';

	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let router = useRouter()
	let scrollList = ref([])
	let detailId = ref()
	let postType = ref()
	let dObj = ref(null)
	let serviceType = ref(0)
	let collect = ref()
	let like = ref()
	onLoad((option) => {
		console.log(option);
		detailId.value = option.id
		postType.value = option.type
		serviceType.value = option.serviceType
		console.log(postType.value, "打印type")
		if (postType.value == 3) {
			//课程			
			getDetailK()
		} else {
			getDetail()
		}
	})
	onUnload(() => {
		if (postType.value == 3) {
			if (isDel.value) {
				uni.$off('serviceLike')
			} else {
				uni.$emit('serviceLike', {
					like: like.value,
					likeNum: dObj.value.likeNum,
					collect: collect.value,
					collectNum: dObj.value.collectNum
				})
			}
		} else {
			if (isDel.value) {
				uni.$off('serviceLike')
			} else {
				uni.$emit('serviceLike', {
					like: dObj.value.like,
					likeNum: dObj.value.likeNum,
					collect: dObj.value.collect,
					collectNum: dObj.value.collectNum
				})
			}

		}

	})
	//postType0是丹普装修
	//postType1是美业证书
	const getDetail = () => {
		proxy.$req('GET', proxy.$api.richDetail13, {
			userId: userStoreInfo.userInfo.id,
			type: postType.value == 0 ? 'store' : 'certificate',
			id: detailId.value
		}).then((res) => {
			console.log(res, 'res');
			dObj.value = res.result
		})
	}
	const getDetailK = () => {
		proxy.$req('GET', proxy.$api.kechengDetail, {
			id: detailId.value,
			userId: userStoreInfo.userInfo.id
		}).then((res) => {
			dObj.value = res.result.course
			collect.value = res.result.collect
			like.value = res.result.like
		})
	}
	const bianji = () => {
		if (postType.value == 0) {
			router.push({
				name: 'pushRich',
				params: {
					postType: postType.value,
					detailId: detailId.value
				}
			})
		} else if (postType.value == 2) {
			router.push({
				name: 'pushRich1',
				params: {
					postType: postType.value,
					detailId: detailId.value
				}
			})
		}
		else if (postType.value == 3) {
			router.push({
				name: 'pushRich2',
				params: {
					detailId: detailId.value
				}
			})
		}
	}
	let delShow = ref(false)
	let isDel = ref(0)
	const deleteMeth = () => {
		let url;
		let methods;
		if (postType.value == 3) {
			url = proxy.$api.deleteService4
			methods = 'delete'
		} else {
			url = proxy.$api.deleteService13
			methods = 'delete'
		}
		proxy.$req(methods, url, {
			supplierId: userStoreInfo.userInfo.supplier.id,
			id: detailId.value
		}).then((res) => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				isDel.value = 1
				uni.$emit('serviceRefash')
				router.back()
			}
		})
	}
	//点赞收藏
	const likeAndCollect = (type1, type2) => {
		proxy.$req('POST', proxy.$api.likeAndCollect, {
			id: detailId.value,
			moduleType: 7,
			operateType: type1,
			updateType: type2,
			serviceType: serviceType.value,
			// serviceType:2,
			userId: userStoreInfo.userInfo.id
		}).then((res) => {
			console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				if (postType.value == 3) {
					//课程			
					// getDetailK()
					if (type1 == 0 && type2 == 'like') {
						like.value = 1
						dObj.value.likeNum++
					} else if (type1 == 0 && type2 == 'unlike') {
						like.value = null
						dObj.value.likeNum--
					} else if (type1 == 1 && type2 == 'collect') {
						collect.value = 1
						dObj.value.collectNum++
					} else if (type1 == 1 && type2 == 'uncollect') {
						collect.value = null
						dObj.value.collectNum--
					}
				} else {
					// getDetail()
					if (type1 == 0 && type2 == 'like') {
						dObj.value.like = 1
						dObj.value.likeNum++
					} else if (type1 == 0 && type2 == 'unlike') {
						dObj.value.like = null
						dObj.value.likeNum--
					} else if (type1 == 1 && type2 == 'collect') {
						dObj.value.collect = 1
						dObj.value.collectNum++
					} else if (type1 == 1 && type2 == 'uncollect') {
						dObj.value.collect = null
						dObj.value.collectNum--
					}
				}
			}
		})
	}
	const call = (e) => {
		uni.makePhoneCall({
			phoneNumber: e
		})
	}
	onShow(() => {
		if (tradeNo.value != '' && payId.value != '') {
			isPaySuccess()
		}
	})
	//支付
	const payment = () => {
		if (payUrl.value != '' && tradeNo.value != '' && payId.value != '') {
			payLKL()
		} else {
			proxy.$req('POST', proxy.$api.addOrder, {
				orderInfoList: [{ productId: dObj.value.id }],
				orderType: 2
			}).then((res) => {
				console.log(res);
				if (!res.success) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					return
				}
				payUrl.value = res.result.resp_data.counter_url
				tradeNo.value = res.result.resp_data.out_order_no
				payId.value = res.result.resp_data.pay_order_no
				payConfirmShow.value = true
			})
		}
	}
	const payLKL = () => {
		// #ifdef APP-PLUS
		plus.runtime.openURL(payUrl.value)
		console.log('app')
		// #endif
		// #ifdef H5
		window.open(payUrl.value)
		console.log('h5')
		// #endif 
	}
	let payConfirmShow = ref(false)
	let payUrl = ref('')
	let tradeNo = ref('')
	let payId = ref('')
	const isPaySuccess = () => {
		proxy.$req('POST', proxy.$api.ShoppingStoreOrder, {
			tradeNo: tradeNo.value,
			payId: payId.value
		}).then((res) => {
			if (res.code != 200 || res.result == null) {
				console.log("出错了")
				uni.$u.toast(res.message)
				return
			}
			let a = JSON.parse(JSON.stringify(res)).result
			let data = JSON.parse(a).resp_data
			if (data.order_status == 0) {
				uni.$u.toast('待支付')
			} else if (data.order_status == 1) {
				uni.$u.toast('支付中')
			} else if (data.order_status == 2) {
				uni.$u.toast('支付成功')
				setTimeout(() => {
					uni.navigateBack({
						delta: 2
					});
				}, 1000)
			} else if (data.order_status == 3) {
				uni.$u.toast('支付失败')
			} else if (data.order_status == 4) {
				uni.$u.toast('订单已过期')
			} else if (data.order_status == 5) {
				uni.$u.toast('订单已取消')
			} else if (data.order_status == 6) {
				uni.$u.toast('部分退款或者全部退款')
			}
		})
	}
	const copy = () => {
		uni.setClipboardData({
			data: `${proxy.$shareUrl}pages/serviceRichDetail/serviceRichDetail?id=${detailId.value}`,
			success: function () {
				uni.$u.toast('分享链接已复制')
			}
		});
	}

	// 聊一聊
	const toIm = () => {
		const { memberId } = dObj.value;
	
		const userId = userStoreInfo.userInfo.id;
			
		if(userId == memberId){
			alert("不能和自己聊天");
			return ;
		}
		console.log('店铺state.detailsData', dObj.value, memberId);
		// #ifdef APP-PLUS
		im.init({
			imFlag: 'localService',
			toUserId: memberId,
		}, () => {
			router.push({
				// name: 'ConversationListPage',
				name: 'ConversationPage',
			})
		})
		// #endif
	}
</script>
<template>
	<u-popup :show="payConfirmShow" :closeable="true" @close="payConfirmShow=false" round="12">
		<view class="popClass">
			<view class="title r-flex-between-center">
				<text> </text>
				<text>确认付款</text>
				<!-- <u-icon name="close" style="opacity: 0;"></u-icon> -->
				<text></text>
			</view>
			<view class="money r-flex-center-end intFont">
				<text style="font-size: 48rpx;font-weight: bold;line-height: 1.5;">￥</text>
				<text>{{ dObj.coursePrice.toFixed(2) }}</text>
			</view>
			<view class="msgBox r-flex-between-center" style="margin-top: 48rpx;">
				<text>订单编号</text>
				<text>{{payId}}</text>
			</view>
			<view class="msgBox r-flex-between-center">
				<text>付款方式</text>
				<text>拉卡拉支付</text>
			</view>
			<view class="nowPay" @click="payLKL">
				立即付款
			</view>
		</view>
	</u-popup>
	<view class="navSearch" :style="{background:`url(${JSON.parse(dObj.images)[0].url})`,
	backgroundSize:'100% 100%',
	backgroundRepeat:'no-repeat',}" v-if="dObj!=null">
		<u-navbar :placeholder="true" leftText="" title="" bgColor="rgba(0,0,0,0)" auto-back :fixed="false">
			<template #right>
				<view @click="copy">
					<u-icon name="share" size="20"></u-icon>
				</view>
			</template>
		</u-navbar>
	</view>
	<u-modal :showConfirmButton="false" width="540rpx" :show="delShow" title="提示">
		<view class="modalDel">
			<view class="del">
				确定要删除吗？
			</view>
			<view class='delFoot'>
				<button class="btn1" @click="delShow = false">取消</button>
				<button class="btn2" @click="deleteMeth()">确定</button>
			</view>
		</view>

	</u-modal>
	<template v-if="dObj!=null">
		<view class="mdNav">
			<view class="mdnTit u-line-3">
				{{ dObj.title }}
			</view>
			<view class="mdnCon" v-if="postType == 3">
				<view class="" @click="likeAndCollect(0,like==null?'like':'unlike')">
					<u-icon :name="like?'thumb-up-fill':'thumb-up' " :color="like?'#CB645E':'' "></u-icon>
					<text class="haha" :style="{color:like?'#CB645E':''}">{{ dObj.likeNum>0?dObj.likeNum:0 }}</text>
				</view>
				<view class="" @click="likeAndCollect(1,collect==null?'collect':'uncollect')">
					<u-icon :name="collect?'heart-fill':'heart'" :color="collect?'#CB645E':'' "></u-icon>
					<text class="haha"
						:style="{color:collect?'#CB645E':''}">{{ dObj.collectNum>0?dObj.collectNum:0 }}</text>
				</view>
				<view class="">
					<u-icon name="eye"></u-icon>
					<text class="haha">{{ dObj.viewNum }}</text>
				</view>
			</view>
			<view class="mdnCon" v-else>
				<view class="" @click="likeAndCollect(0,dObj.like==null?'like':'unlike')">
					<u-icon :name="dObj.like?'thumb-up-fill':'thumb-up' " :color="dObj.like?'#CB645E':'' "></u-icon>
					<text class="haha"
						:style="{color:dObj.like?'#CB645E':''}">{{ dObj.likeNum>0?dObj.likeNum:0 }}</text>
				</view>
				<view class="" @click="likeAndCollect(1,dObj.collect==null?'collect':'uncollect')">
					<u-icon :name="dObj.collect?'heart-fill':'heart'" :color="dObj.collect?'#CB645E':'' "></u-icon>
					<text class="haha"
						:style="{color:dObj.collect?'#CB645E':''}">{{ dObj.collectNum>0?dObj.collectNum:0 }}</text>
				</view>
				<view class="">
					<u-icon name="eye"></u-icon>
					<text class="haha">{{ dObj.viewNum }}</text>
				</view>
			</view>
		</view>
		<view class="mdContainer">
			<view class="mdDetail">
				<view class="mddTit">
					公司介绍
				</view>
				<view class="mddRich">
					<text>{{ dObj.companyProfile }}</text>
				</view>
				<view class="mddRich" v-if="dObj.companyProfileImgUrl!=null">
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in JSON.parse(dObj.companyProfileImgUrl)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail" v-if="postType==0">
				<view class="mddTit">
					装修案例
				</view>
				<view class="mddRich">
					<text>{{ dObj.decorationCases }}</text>
				</view>
				<view class="mddRich" v-if="dObj.decorationCasesImgUrl!=null">
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in JSON.parse(dObj.decorationCasesImgUrl)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail" v-if="postType==2">
				<view class="mddTit">
					证书图册
				</view>
				<view class="mddRich" v-if="dObj.certificateImgs!=null">
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in JSON.parse(dObj.certificateImgs)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail" v-if="postType!=3">
				<view class="mddTit">
					公司资质
				</view>
				<view class="mddRich">
					<text>{{ dObj.companyQualifications }}</text>
				</view>
				<view class="mddRich" v-if="dObj.companyQualificationsImgUrl!=null">
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in JSON.parse(dObj.companyQualificationsImgUrl)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail" v-if="postType==3">
				<view class="mddTit">
					学习内容
				</view>
				<view class="mddRich">
					<text>{{ dObj.learningBeauty }}</text>
				</view>
				<view class="mddRich" v-if="dObj.learningBeautyImgUrl!=null">
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in JSON.parse(dObj.learningBeautyImgUrl)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail" v-if="postType==3">
				<view class="mddTit">
					主讲人
				</view>
				<view class="mddRich" v-if="dObj.speaker!=null">
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in JSON.parse(dObj.speaker)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail" v-if="postType==3">
				<view class="mddTit">
					报名方式
				</view>
				<view class="mddRich">
					<text>{{ dObj.applicationMethod }}</text>
				</view>
			</view>
			<view class="mdDetail" v-if="postType==3">
				<view class="mddTit">
					购买须知
				</view>
				<view class="mddRich">
					<text>{{ dObj.purchaseNotes }}</text>
				</view>
				<view class="mddRich" v-if="dObj.purchaseNotesImgUrl!=null">
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in JSON.parse(dObj.purchaseNotesImgUrl)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail" v-if="postType!=3">
				<view class=" mddTit">
					合作方式
				</view>
				<view class="mddRich">
					{{ dObj.cooperationMethods }}
				</view>
				<view class="mddRich">
					<u-scroll-list :indicator="false" v-if="dObj.cooperationMethodsImgUrl!=null">
						<view v-for="(item, index) in  JSON.parse(dObj.cooperationMethodsImgUrl)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail">
				<view class="mddTit">
					公司地址
				</view>
				<view class="mddRich">
					{{dObj.companyAddress }}
				</view>
			</view>
		</view>
		<view class="" v-if="userStoreInfo.userFlag == 2 && dObj.supplierId == userStoreInfo.userInfo.supplier.id">
			<view class="btmBtn" v-if="postType==0||postType==2||postType==3">
				<view class="bbItem" @click="bianji">
					编辑
				</view>
				<view class="bbItem" @click="delShow=true">
					删除
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="btmBtn" v-if="postType==0||postType==2">
				<view class="bbItem" @click="toIm">
					在线咨询
				</view>
				<view class="bbItem" @click="call(dObj.contactPhone)">
					拨打电话
				</view>
			</view>
			<view class="payBtm" v-if="postType==3">
				<view class="pbL r-flex-around-center">
					<view class="c-flex-center-center" @click="toIm">
						<u-icon name="chat" size="22"></u-icon>
						<text style="margin-top: 10rpx;">在线咨询</text>
					</view>
					<view class="c-flex-center-center" @click="call(dObj.contactPhone)">
						<u-icon name="phone" size="22"></u-icon>
						<text style="margin-top: 10rpx;">电话</text>
					</view>
				</view>
				<view class="pbR" @click="payment">
					立即购买：￥{{dObj.coursePrice.toFixed(2)}}
				</view>
			</view>
		</view>
	</template>
</template>
<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.popClass {
		height: 718rpx;

		.title {
			margin: 32rpx 0;
			padding: 0 32rpx;
			font-size: 36rpx;
			font-weight: 500;
		}

		.money {
			font-size: 88rpx;
			font-weight: bold;
			color: #000000;
		}


		.msgBox {
			padding: 26rpx 48rpx;

			text:nth-child(1) {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.45);
			}

			text:nth-child(2) {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}
		}

		.nowPay {
			margin: 0 auto;
			width: 686rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #CB645E;
			border-radius: 16rpx;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			margin-top: 136rpx;
		}
	}

	.navSearch {
		width: 100%;
		height: 450rpx;
		background-color: #e7e7e7;
	}

	.mdContainer {
		width: 686rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding-bottom: 150rpx;
	}

	.mdNav {
		box-sizing: border-box;
		width: 100%;
		padding: 32rpx;
		height: 224rpx; 
		background-color: #fff;
		margin-bottom: 32rpx;

		.mdnTit {
			min-height: 88rpx;
			font-size: 32rpx;
			margin-bottom: 20rpx;
			font-weight: 600;
			color: #000000;
		}

		.mdnCon {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			view {
				display: flex;
				justify-content: center;
				align-items: center;

				.haha {
					font-size: 28rpx;
					margin-right: 90rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.mdDetail {
		width: calc(100% - 60rpx);
		padding: 32rpx 32rpx;

		.mddTit {
			// height: 80rpx;
			// line-height: 80rpx;
			margin-bottom: 32rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #000000;
		}

		.mddRich {
			text {
				// font-size: 26rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.65);
			}

			.scrollItem {
				margin: 10rpx 10rpx;

				image {
					width: 280rpx;
					height: 200rpx;
				}

				text {
					font-size: 26rpx;
				}
			}
		}
	}

	.btmBtn {
		width: 100%;
		height: 144rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);

		.bbItem {
			width: 326rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 16rpx;
			text-align: center;
		}

		.bbItem:nth-child(1) {
			background: rgba(255, 255, 255, 0);
			border: 2rpx solid #CB645E;
			color: #CB645E;
		}

		.bbItem:nth-child(2) {
			color: #FFFFFF;
			background: #CB645E;
		}
	}

	.payBtm {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.pbL {
			width: 250rpx;
			height: 100%;
			font-size: 24rpx;
		}

		.pbR {
			width: 450rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #CC645E;
			color: #FFFFFF;
			text-align: center;
			border-radius: 10rpx;
		}
	}

	.modalDel {
		.del {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

		.delFoot {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;

			.btn1 {
				width: 206rpx;
				height: 88rpx;
				background: rgba(255, 255, 255, 0);
				border: 2rpx solid #CB645E;
				color: #CB645E;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}

			.btn2 {
				width: 206rpx;
				height: 88rpx;
				background: #CB645E;
				color: #FFFFFF;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}
		}
	}
</style>